<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/js/jquery-ui.js"></script>
    <script type="text/javascript" src="/static/js/json.min.js"></script>
    <script type="text/javascript" src="/static/js/date.js"></script>

    <link rel="stylesheet" type="text/css" href="/static/styles/common.css"/>
    <link rel="stylesheet" type="text/css" href="/static/styles/header.css"/>
    <link rel="stylesheet" type="text/css" href="/static/styles/logon.css"/>
    <link rel="stylesheet" type="text/css" href="/static/styles/ui-lightness/jquery-ui-1.8.5.custom.css"/>
    <link rel="stylesheet" type="text/css" href="/static/styles/contract.css"/>
    <link rel="stylesheet" type="text/css" href="/static/styles/invoice.css"/>
    <link rel="stylesheet" type="text/css" href="/static/styles/timesheet.css"/>
    <link rel="stylesheet" type="text/css" href="/static/styles/new-client-popup.css"/>

    <script type="text/javascript">
        $(function () {
            $("#background").ajaxError(function(e, xhr, settings, exception) {
                alert(xhr.response);
                displayError("Ajax Error", "Error getting content from " + settings.url, xhr, exception);
            });

            $("#submit").click(function() {
                submit();
            });

            $("#cancel").click(function() {
                cancel();
            });

            $("#menu_contract").click(function() {
                changeContent("/contract/view");
            });

            $("#menu_invoice").click(function() {
                changeContent("/invoice/view");
            });

            $("#menu_timesheet").click(function() {
                changeContent("/timesheet/view");
            });

            $("a#logout").attr("href", "/logout");
        });

        function changeContent(path) {
            $.get(path, function(content) {
                $("#content").html(content);
            });
        }

        function loadScript(script) {
            $.getScript(script);
        }

        function displayError(msg, additionalMsg, xhr, error) {
            $("#errormsg p").text(msg);
            $("#errormsg").fadeIn(200).delay(3000).fadeOut(2000);
            $("#errorDialog").html(xhr.response)
            $("#errorDialog").dialog({
                autoOpen: false,
                height: 270,
                width: 270,
                modal: true
            });
        }

        function activateMenuContract() {
            $("#menu_contract").addClass("active");
            $("#menu_invoice").removeClass("active");
            $("#menu_timesheet").removeClass("active");

            $("#submenu_new").unbind('click');
            $("#submenu_view").unbind('click');
            $("#submenu_new").click(function() {
                changeContent("/contract/new");
            });
            $("#submenu_view").click(function() {
                changeContent("/contract/view");
            });
        }

        function activateMenuInvoice() {
            $("#menu_contract").removeClass("active");
            $("#menu_invoice").addClass("active");
            $("#menu_timesheet").removeClass("active");

            $("#submenu_new").unbind('click');
            $("#submenu_view").unbind('click');
            $("#submenu_new").click(function() {
                changeContent("/invoice/new");
            });
            $("#submenu_view").click(function() {
                changeContent("/invoice/view");
            });
        }

        function activateMenuTimesheet() {
            $("#menu_contract").removeClass("active");
            $("#menu_invoice").removeClass("active");
            $("#menu_timesheet").addClass("active");

            $("#submenu_new").unbind('click');
            $("#submenu_view").unbind('click');
            $("#submenu_new").click(function() {
                changeContent("/timesheet/new");
            });
            $("#submenu_view").click(function() {
                changeContent("/timesheet/view");
            });
        }

        function activateSubMenuNew() {
            $("#submenu_new").addClass("active");
            $("#submenu_view").removeClass("active");
            $("#submenu").show();
        }

        function activateSubMenuView() {
            $("#submenu_new").removeClass("active");
            $("#submenu_view").addClass("active");
            $("#submenu").show();
        }

        function hideSubmenu() {
            $("#submenu").hide();
        }
    </script>

    <title>{% block title %} PyFacture {% endblock %}</title>

</head>
<body>
<div id="background">
    <div class="wrapper">

        <div id="header">

            <a href="/login/">
                <img src="/static/img/logo.gif" width="257" height="36" id="logo" alt="logo Quattroclix"/>
            </a>

            <div id="menu">
                <ul>
                    {% if show_menu %}
                        <button class="menu" id="menu_contract">Contracts</button>
                        <button class="menu" id="menu_invoice">Invoices</button>
                        <button class="menu" id="menu_timesheet">Timesheets</button>
                    {% endif %}
                </ul>
            </div>

            <div id="right-menu">
                <ul>
                    {% if show_menu %}
                        <button id="logout">Logout</button>
                    {% endif %}
                </ul>
            </div>
        </div>

        <div id="subheader">
            <div id="errormsg">
                <p>{{ error_msg }}</p>
            </div>
            <div id="submenu">
                <ul>
                    <button class="submenu" id="submenu_new">New</button>
                    <button class="submenu" id="submenu_view">View</button>
                </ul>
            </div>
        </div>

        {% block content %}
            <div id="content">
                <div>
                    <p>Please select an entry in the top menu.</p>
                </div>
            </div>
        {% endblock %}

    </div>
</div>
</body>
</html>